<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>登录</title>
<link rel="stylesheet" href="__HOME__/css/public_style.css">
<link rel="stylesheet" href="__HOME__/css/layer.css">
<style>
	html,body{width:100%;height:100%;}

	/*-- 顶部头像 --*/
	.ding_bgimg{position:relative;}
	.ding_bgimg>img{width:100%;}
	.ding_bgimg>div{
		border:4px solid #99b2e9;height:68px;width:68px;position:absolute;
		left:calc(50% - 36px);top:30px;border-radius:50%;overflow:hidden;box-shadow:0px 12px 10px 0px #2a51e4;
	}
	.ding_bgimg>div>img{width:100%;}
	/*-- 顶部头像 --*/
	/*-- 底部内容 --*/
	.dibu_cont{padding:30px;}
	.dibu_cont>ul>li{border-bottom:1px solid #f0f0f0;padding:20px 0 10px;}
	.dibu_cont>ul>li>div{float:left;width:30px;height:30px;background:url(__HOME__/img/dlzc_tubiao.png) no-repeat;background-size:90px 90px;filter:grayscale(100%);transition:.2s;}
	.dibu_cont>ul>li>input{float:left;display:block;border:none;height:30px;line-height:30px;text-indent:10px;width:calc(100% - 30px);outline:none;}
	
	.dibu_cont>button{
		width:224px;height:44px;border-radius:22px;border:none;display:block;line-height:44px;font-size:18px;color:#fff;margin:30px auto 10px;outline:none;
		background-image: -moz-linear-gradient( 0deg, rgb(18,40,246) 0%, rgb(51,174,255) 100%, rgb(51,173,255) 100%);
		background-image: -webkit-linear-gradient( 0deg, rgb(18,40,246) 0%, rgb(51,174,255) 100%, rgb(51,173,255) 100%);
		background-image: -ms-linear-gradient( 0deg, rgb(18,40,246) 0%, rgb(51,174,255) 100%, rgb(51,173,255) 100%);
	}
	
	.dibu_cont>div{color:#477bff;font-size:14px;}
	.dibu_cont>div>div:nth-of-type(1){float:left;border-right:1px solid #477bff;text-align:center;width:70px;margin-left:calc(50% - 71px);}
	.dibu_cont>div>div:nth-of-type(2){float:left;border-left:1px solid #477bff;text-align:center;width:70px;margin-right:calc(50% - 71px);}
	/*-- 底部内容 --*/
	/*-- 忘记密码弹窗 --*/
	.wangji_mm_tc{position:fixed;width:100%;height:100%;left:0;top:0;background-color:rgba(0,0,0,.6);display:none;}
	.wangji_mm_tc>div{position:absolute;background-color:#fff;width:280px;height:283;top:calc(50% - 165px);left:calc(50% - 140px);border-radius:5px;}
	.wangji_mm_tc>div>p{
		height:40px;line-height:40px;color:#fff;text-align:center;border-top-left-radius:5px;border-top-right-radius:5px;
		background-image: -moz-linear-gradient( 0deg, rgb(18,40,246) 0%, rgb(51,174,255) 100%, rgb(51,173,255) 100%);
		background-image: -webkit-linear-gradient( 0deg, rgb(18,40,246) 0%, rgb(51,174,255) 100%, rgb(51,173,255) 100%);
		background-image: -ms-linear-gradient( 0deg, rgb(18,40,246) 0%, rgb(51,174,255) 100%, rgb(51,173,255) 100%);
	}
	
	.wangji_mm_tc>div>ul{padding:10px;}
	.wangji_mm_tc>div>ul>li{border-bottom:1px solid #f0f0f0;padding:10px 0;}
	.wangji_mm_tc>div>ul>li>div{float:left;width:30px;height:30px;background:url(__HOME__/img/dlzc_tubiao.png) no-repeat;background-size:90px 90px;filter:grayscale(100%);transition:.2s;}
	.wangji_mm_tc>div>ul>li>input{float:left;display:block;border:none;height:30px;line-height:30px;text-indent:10px;width:calc(100% - 30px);outline:none;}
	
	.wangji_mm_tc>div>button{
		width:200px;height:40px;border-radius:20px;border:none;display:block;line-height:40px;font-size:18px;color:#fff;margin:10px auto 20px;outline:none;
		background-image: -moz-linear-gradient( 0deg, rgb(18,40,246) 0%, rgb(51,174,255) 100%, rgb(51,173,255) 100%);
		background-image: -webkit-linear-gradient( 0deg, rgb(18,40,246) 0%, rgb(51,174,255) 100%, rgb(51,173,255) 100%);
		background-image: -ms-linear-gradient( 0deg, rgb(18,40,246) 0%, rgb(51,174,255) 100%, rgb(51,173,255) 100%);
	}
	
	.off_mm_tc{
		background:url(__HOME__/img/tubiao_02.png) no-repeat;background-size:100px 100px;background-position-Y:-32px;
		width:40px;height:40px;bottom:-50px;left:calc(50% - 20px);position:absolute;
	}
	.yazheng>input{width:calc(100% - 130px)!important;}
	.yazheng>#hq_yzm{float:left;width:89px;border-left:1px solid #999;color:#999;background:none;line-height:30px;text-align:center;font-size:14px;}
	/*-- 忘记密码弹窗 --*/
	
</style>
</head>

<body>
	<!-- 顶部头像 -->
	<div class="ding_bgimg">
		<img src="__HOME__/img/dl_topimg.png" alt="">
		<div><img src="__HOME__/img/touxiang.png" alt=""></div>
	</div>
	<!-- 顶部头像 -->
	<!-- 底部内容 -->
	<div class="dibu_cont">
		<ul>
			<li>
				<div style="background-position-Y:-30px"></div>
				<input type="text" placeholder="输入账号" name="uname">
				<h6 class="clearfix"></h6>
			</li>
			<li>
				<div style="background-position-X:-30px"></div>
				<input type="password" placeholder="输入密码" name="passwd">
				<h6 class="clearfix"></h6>
			</li>
<!--
			<li class="yazheng">
				<div style="background-position-X:-60px"></div>
				<input type="text" placeholder="输入验证码">
				<h6 class="clearfix"></h6>
			</li>
-->
		</ul>
		<button class="login" onclick="login()">登录</button>
		<div>
			<div class="wangji_mm">忘记密码</div>
			<div onClick="location.href='{:url('register')}'">注册账号</div>
			<h6 class="clearfix"></h6>
		</div>
	</div>
	<!-- 底部内容 -->
	<!-- 忘记密码弹窗 -->
	<div class="wangji_mm_tc">
		<div>
			<p>重置密码</p>
			<ul>
				<li>
					<div></div>
					<input type="text" placeholder="请输入手机号" name="tell" oninput="this.value= value.replace(/\D/g,'')" onblur="checkacc()">
					<h6 class="clearfix"></h6>
				</li>
				<li>
					<div style="background-position-X:-30px"></div>
					<input type="password" placeholder="请输入新密码" name="newpwd">
					<h6 class="clearfix"></h6>
				</li>
				<li class="yazheng">
					<div style="background-position-X:-60px"></div>
					<input type="text" placeholder="请输入验证码" name="code">
					<p id="hq_yzm">获取验证码</p>
					<h6 class="clearfix"></h6>
				</li>
			</ul>
			<button onclick="repasswd()">确认</button>
			<div class="off_mm_tc"></div>
		</div>
	</div>
	<!-- 忘记密码弹窗 -->
</body>
<script src="__HOME__/js/jquery-3.3.1.js"></script>
<script>

	var uname,passwd,tell,repass,code,recode;

	$(".dibu_cont>ul>li>input").focus(function(){
		$(this).siblings("div").css("filter","grayscale(0)");
	})
	$(".dibu_cont>ul>li>input").blur(function(){
		$(this).siblings("div").css("filter","grayscale(100%)");
	})
	/*-- 忘记密码弹窗 --*/
	$(".wangji_mm_tc>div>ul>li>input").focus(function(){

		$(this).siblings("div").css("filter","grayscale(0)");
	})
	$(".wangji_mm_tc>div>ul>li>input").blur(function(){
		$(this).siblings("div").css("filter","grayscale(100%)");
	})

	$(".wangji_mm").click(function(){

		recode = null;
		$('input[name="tell"]').val('');
		$('input[name="tell"]').focus();
		$(".wangji_mm_tc").show();
	})
	$(".off_mm_tc").click(function(){
		$(".wangji_mm_tc").hide();
	})
	/*-- 忘记密码弹窗 --*/
	/* 读秒 */
	$("#hq_yzm").click(function(){

		if($("#hq_yzm").text() !== "获取验证码")return false;

		if(!tell){

			layer.open({ content: '请输入正确的手机号' ,skin: 'msg' ,time: 2});
			return false;
		}

		$.post('/index/login/returncode',{phone:tell},function(msg){

			if(msg){

				recode = msg;
			}
		});
		jishi();
	})

	//倒计时
	function jishi(){

		var aa = $("#hq_yzm").text();
		if(aa === "获取验证码"){
			$("#hq_yzm").text("还剩60s");
			dao_js();
		}
	}

	function dao_js(){
		var a = 60;
		var d_t = setInterval(function(){
			a--;
			if(a >= 0){
				var d = "还剩" + a + "s"
				$("#hq_yzm").text(d);
			}else{
				clearInterval(d_t);
				recode = null;
				$("#hq_yzm").text("获取验证码");

			}
		},1000)
	}



	/* 读秒 */
	function checkacc(){

		if(recode)return false;

		tell = $('input[name="tell"]').val();

		if(!(/^[1][3,4,5,7,8][0-9]{9}$/.test(tell)) || !tell){

			layer.open({ content: '请输入正确的手机号' ,skin: 'msg' ,time: 2});

			tell = null;
			$('input[name="tell"]').val('');
			return false;	

		}

		$.post('/index/login/checktell',{phone:tell},function(msg){

			switch(msg){
				case '0':
						layer.open({ content: '手机号未注册' ,skin: 'msg' ,time: 2});
						tell = null;
						$('input[name="tell"]').val('');
						$('input[name="tell"]').focus();
						break;
				case 'error': break;
			}
			return false;
		});
		return false;
	}
	function login(){	

		uname  = $('input[name="uname"]').val();
		passwd = $('input[name="passwd"]').val();


		if(uname == '' || passwd == ''){

			layer.open({ content: '账号或密码不能为空' ,skin: 'msg' ,time: 2});

			return false;
		}

		$.post('/index/login/index',{u:uname,pwd:passwd},function(msg){

			switch(msg){
        		case 0: layer.open({ content: '账号或密码错误' ,skin: 'msg' ,time: 2}); 
        				$('input[name="passwd"]').val(''); break;

        		case 1: layer.open({ content: '账号不存在' ,skin: 'msg' ,time: 2});     
        				$('input[name="uname"]').val('');  break;

        		case 2: layer.open({ content: '登录成功' ,skin: 'msg' ,time: 2});
        				location.href='/index/index/index.html';  break;
        		default:
        				 layer.open({ content: '请输入正确的账号或密码' ,skin: 'msg' ,time: 2}); break;
        	}

        	return false;
		})
	}

	function repasswd(){

		repass = $('input[name="newpwd"]').val();

		code = $('input[name="code"]').val();

		if(!tell || !repass || !code){

			layer.open({ content: '请完善相关信息' ,skin: 'msg' ,time: 2});
			return false;	
		}
		if(!recode){

			layer.open({ content: '请先获取验证码' ,skin: 'msg' ,time: 2});
			return false;	

		}

		if(parseInt(code) !== parseInt(recode)){

			layer.open({ content: '验证码错误' ,skin: 'msg' ,time: 2});
			return false;
		}else{

			$.post('/index/login/savepwd',{phone:tell,pwd:repass},function(msg){

				if(msg){

					layer.open({ content: '修改成功' ,skin: 'msg' ,time: 2});

					$('input[name="code"]').val('');
					$('input[name="newpwd"]').val('');
					$(".wangji_mm_tc").hide();
					return false;
				}
			})	
		}

	}

</script>
<script src="__HOME__/js/layer.js"></script>
</html>
